<!-- Loading.vue -->
<template>
  <div class="loader"></div>
</template>

<script setup>
</script>

<style scoped lang="scss">
.loader {
    width: 28px;  // 调整为更接近字体大小的比例
    height: 28px;
    color: #C3DFDC; // 修改为主题颜色
    position: relative;
    background: radial-gradient(7px, currentColor 94%, #0000);

    &:before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(6.3px at bottom right, #0000 94%, currentColor) top left,
        radial-gradient(6.3px at bottom left, #0000 94%, currentColor) top right,
        radial-gradient(6.3px at top right, #0000 94%, currentColor) bottom left,
        radial-gradient(6.3px at top left, #0000 94%, currentColor) bottom right;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        animation: loader 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
    }
    }

    @keyframes loader {
    33% {
        inset: -7px;
        transform: rotate(0deg);
    }
    66% {
        inset: -7px;
        transform: rotate(90deg);
    }
    100% {
        inset: 0;
        transform: rotate(90deg);
    }
}
</style>
